export default defineComponent({
  name: "TopSideComponent",
  setup() {
    const topMenuActive = ref(import.meta.env.VITE_PROJECT),
      router = useRouter();
    const _projectType = import.meta.env.VITE_PROJECT_TYPE;
    const _menusList = [
      {
        title: "客户服务", 
        role: "customer",
        url:
          _projectType === "dev"
            ? "http://localhost:9999/customer/workbench"
            : "/customer/workbench",
      },
      {
        title: "招聘考试", 
        role: "recruitment",
        url:
          _projectType === "dev"
            ? "http://localhost:9933/recruitment/workbench"
            : "/recruitment/workbench",
      },
      {
        title: "保障服务", 
        role: "guarantee",
        url:
          _projectType === "dev"
            ? "http://localhost:9988/guarantee/workbench"
            : "/guarantee/workbench",
      },
      {
        title: "结算服务", 
        role: "settlement",
        url:
          _projectType === "dev"
            ? "http://localhost:9977/settlement/workbench"
            : "/settlement/workbench",
      },
      {
        title: "财务监管",
        role: "finance",
        url:
          _projectType === "dev"
            ? "http://localhost:9966/finance/workbench"
            : "/finance/workbench",
      },
      {
        title: "统计报表",
        role: "statistical",
        url:
          _projectType === "dev"
            ? "http://localhost:9955/statistical/workbench"
            : "/statistical/workbench",
      },
      {
        title: "系统配置",
        role: "systems",
        url:
          _projectType === "dev"
            ? "http://localhost:9944/systems/workbench"
            : "/systems/workbench",
      },
    ];
    const navHandler=(url)=>{
      location.href=url;
    }
    return () => (
      <div class="gap-[10px] mx-auto">
        {_menusList.map((item) => (
          <el-button
            type={topMenuActive.value === item.role ? "primary" : ""}
            onClick={() => navHandler(item.url)}
          >
            {item.title}
          </el-button>
        ))}
      </div>
    );
  },
});
